<template>
	<view>
		<u-navbar back-text="" back-icon-color="#000000" :title="title" :border-bottom="false" title-color="#000000"
			:background="background"></u-navbar>
		<canvas id="myCanvas" canvas-id="firstCanvas"></canvas>
		<button class="button" @click="save_but">
			保存图片
		</button>
		<view class="img">
			<image src="../../static/image/b0.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				title: "蜂巢产出",
				ewm: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg',
			}
		},
		onLoad(option) {
			than = this;
		},
		onReady: function(e) {
			than.post("api/center/qrOfinvite", null, function(data) {
				than.ewm = data.invite_picture
				than.copyFn()
			})
		},
		methods: {
			save_but() {
				uni.showLoading();
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						than.download(res.tempFilePath)
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
			copyFn() {
				let _this = this
				than.post("api/index/headOfIndex", null, function(d) {
					let c_width, h_width;
					const query = uni.createSelectorQuery().in(_this);
					query.select('#myCanvas').boundingClientRect(data => { //获取canvas-dom
						c_width = data.width; //准确的宽高
						h_width = data.height
						let context = uni.createCanvasContext('firstCanvas') //绑定画布			
						context.drawImage('../../static/image/b1.png', 0, 0, c_width, h_width);
						context.setFontSize(12);
						context.setFillStyle('#FF001F');
						context.fillText('今日产出蜜贝', c_width / 6, h_width / 3.6);
						context.setFillStyle('#742F00');
						context.fillText('累计产出蜜贝', c_width / 1.8, h_width / 3.6);
						context.fillText('本周产出蜜贝', c_width / 6, h_width / 2.1);
						context.fillText('金蜜/蜂钻', c_width / 1.8, h_width / 2.1);
						context.setFillStyle('#F66337');
						context.setFontSize(20);
						context.setFillStyle('#1B1B1D');
						context.fillText(d.guomi + 'Fmb', c_width / 6, h_width / 2.9);
						context.fillText(d.total_guomi + 'Fmb', c_width / 1.8, h_width / 2.9);
						context.fillText(d.week_guomi + 'Fmb', c_width / 6, h_width / 1.85);
						context.fillText(d.jindou + '/'+d.jinzuan, c_width / 1.8, h_width / 1.85);
						context.setFillStyle('#FFE283');
						context.setFontSize(12);
						context.fillText('长按识别二维码', c_width / 2.7, h_width / 1.1);
						context.drawImage(_this.ewm, c_width / 2.555, h_width / 1.4, c_width / 5, c_width /
							5);
						context.draw();
					}).exec();
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FFFAE5;
	}

	#myCanvas {
		width: 697rpx;
		height: 943rpx;
		margin: auto;
	}

	.button {
		margin: 40rpx auto;
		width: 245rpx;
		height: 74rpx;
		background: #FB683D;
		border-radius: 20rpx;
		line-height: 74rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.img {
		text-align: center;
		padding-bottom: 20rpx;

		image {
			width: 678rpx;
			height: 232rpx;
		}
	}
</style>
